<template>
  <div class="msg-content">
    <div class="msg-history-time">
        <span>历史记录</span>
    </div>
    <!-- <div v-for="(item, index) in msgList" :key="index" :class="'msg-item ' + selfSend(item.id)">
        <div class="avatar">
            <img :src="item.avatar" alt="头像">
        </div>
        <div class="message">
            <span class="nickname">{{item.nickname}}</span>
            <span class="msg">{{item.msg}}</span>
        </div>
        <div class="clearfix"></div>
    </div> -->
    <div v-for="(item, index) in msgList" :key="index" :class="'msg-item ' + selfSend(item.id)">
        <div class="avatar">
            <img :src="selfSend(item.id) ? myInfo.avatar : $store.getters.getUserInfoByCurrentId.avatar" alt="头像">
        </div>
        <div class="message">
            <span class="nickname">{{selfSend(item.id) ? myInfo.nickname : $store.getters.getUserInfoByCurrentId.nickname}}</span>
            <span class="msg">{{item.msg}}</span>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="msg-history-time">
        <span>{{nowChatTime}}</span>
    </div>
    <div v-for="(item, index) in chatRecord" :key="index" :class="'msg-item ' + selfSend(item.from)">
        <div class="avatar">
            <img :src="selfSend(item.from) ? myInfo.avatar : $store.getters.getUserInfoByCurrentId.avatar" alt="头像">
        </div>
        <div class="message">
            <span class="nickname">{{selfSend(item.from) ? myInfo.nickname : $store.getters.getUserInfoByCurrentId.nickname}}</span>
            <span class="msg">{{item.msg}}</span>
        </div>
        <div class="clearfix"></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      myInfo: {},
      targetInfo: {},
      chatRecord: []
    }
  },
  methods: {
    selfSend: function (id) {
      return this.myInfo.id === id ? 'self' : ''
    }
  },
  computed: {
    nowChatTime: function () {
      let time = new Date()
      let year = time.getFullYear()
      let month = time.getMonth() + 1
      let day = time.getDate()
      return `${year}年${month}月${day}日`
    },
    msgList: function () {
      return this.$store.getters.getSingleChatRecordByCurrentId
    }
  },
  created: function () {
    this.myInfo = this.$store.getters.getMyInfo
    this.targetInfo = this.$store.getters.getUserInfoByCurrentId
  },
  sockets: {
    // customEmit: function (data) {
    //   console.log(data.msg)
    // }
    sendMsg: function (data) {
      console.log('receive my sent msg')
      this.chatRecord.push(data)
    },
    receiveMsg: function (data) {
      console.log('receive msg')
      this.chatRecord.push(data)
    },
    receiveOfflineMsg: function (datas) {
      console.log('receive offline msg')
      for (let data in datas) {
        this.chatRecord.push(data)
      }
    }
  }
}
</script>

<style lang="scss">
.msg-content{
    height: calc(100% - 100px - 30px);
    background-color: whitesmoke;
    overflow-y: scroll;
    .msg-history-time{
        display: block;
        text-align: center;
        margin: 10px auto;
        color: whitesmoke;
        span{
            background: lightgrey;
            border-radius: 15px;
            padding: 0 10px 0 10px;
        }
    }
    .msg-item{
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        .avatar{
            img{
                width: 35px;
                height: 35px;
                border-radius: 5px;
            }
        }
        .message{
            display: block;
            margin: 5px;
            .nickname{
                display: block;
                font-size: 50%;
                color: grey;
            }
            .msg{
                display: block;
                padding: 3px;
                border-radius: 5px;
                color: black;
                background: white;
                overflow: wrap;
            }
        }
    }
    .self{
        flex-direction: row-reverse;
        .avatar{
            text-align: right;
        }
        .message{
            text-align: right;
            .msg{
                text-align: left;
                background: lightgreen;
            }
        }
    }
}
</style>
